<template>
<header>
    <h2 class="title">{{wordValue?wordValue:"word hunt"}}</h2>
    <div class="input-wrap">
        <input 
        type="text" 
        placeholder="search a word" 
        v-model="wordValue"
        @input="$emit('update:modelValue',$event.target.value)">
    </div>
</header>
</template>

<script setup>
import {ref} from 'vue';
const wordValue = ref();

//update:modelValue 用语法糖的时候名字不可自定义,必须用这个
defineEmits(["update:modelValue"])
</script>

<style lang="scss" scoped>
header{
    // height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    h2{
        font-size: 7vw;
        font-weight:100;
        @media (max-width:1000px) {
            font-size: 11vw;
        }
    }
    .input-wrap{
        input{
            width: 50vw;
            border:none;
            background:#282c34;
            border-bottom: 1px solid rgba(197,188,188);
            padding: 5px;
            font-size: 18px;
            color: white;
            &:focus{outline: none;border-bottom: 1px solid white;}
            &::placeholder{color: rgba($color: #fff, $alpha: 0.6);}
        }
    }
}
</style>
